<template>
  <h2 class="header">育儿知识</h2>
  <view class="page">
    <view class="first-row">
      <uni-data-select v-model="value" :localdata="range" @change="change" class="first-row-left"></uni-data-select>
      <view class="first-row-right">
        <uni-icons type="search" size="24" class="search-icon"></uni-icons>
        <input class="input" placeholder="搜索育儿知识" @click="search" />
      </view>
    </view>

    <image src="../../../static/picture/zhishi1.jpg" class="knowledge-image"></image>

    <view class="knowledge-title">科学喂养</view>
    <view class="row-item" >
    	<view class="col-1" @click="toknowledgelist">
    		<button class="sign-button" plain="true"><text class="text-1">奶粉喂养</text></button>
    	</view>
    	<view class="col-2" >
    		<button class="sign-button" plain="true"><text class="text-2">食材挑选</text></button>
    	</view>
    	<view class="col-3">
    		<button class="sign-button" plain="true"><text class="text-3">营养均衡</text></button>			
    	</view>		
    </view>
	<view class="row-item" >
    	<view class="col-1" >
    		<button class="sign-button" plain="true"><text class="text-1">母乳喂养</text></button>
    	</view>
    	<view class="col-2" >
    		<button class="sign-button" plain="true"><text class="text-2">辅食添加</text></button>
    	</view>
    	<view class="col-3">
    		<button class="sign-button" plain="true"><text class="text-3">饮食安全</text></button>			
    	</view>		
    </view>
	<view class="row-item" >
    	<view class="col-1" >
    		<button class="sign-button" plain="true"><text class="text-1">喂养工具</text></button>
    	</view>
    	<view class="col-2" >
    		<button class="sign-button" plain="true"><text class="text-2">喂养误区</text></button>
    	</view>
    	<view class="col-3">
    		<button class="sign-button" plain="true"><text class="text-3">科学纠正</text></button>			
    	</view>		
    </view>
	<view class="knowledge-title">辅食添加</view>
	<view class="row-item" >
		<view class="col-1" >
			<button class="sign-button" plain="true"><text class="text-1">泥状辅食</text></button>
		</view>
		<view class="col-2" >
			<button class="sign-button" plain="true"><text class="text-2">糊状辅食</text></button>
		</view>
		<view class="col-3">
			<button class="sign-button" plain="true"><text class="text-3">块状辅食</text></button>			
		</view>		
	</view>
	<view class="row-item" >
		<view class="col-1" >
			<button class="sign-button" plain="true"><text class="text-1">碳水化合物类</text></button>
		</view>
		<view class="col-2" >
			<button class="sign-button" plain="true"><text class="text-2">蛋白质类</text></button>
		</view>
		<view class="col-3">
			<button class="sign-button" plain="true"><text class="text-3">蔬菜类</text></button>			
		</view>		
	</view>
    
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const range = ref([
  { value: 1, text: "孕期" },
  { value: 2, text: "0-1岁" },
  { value: 3, text: "1-3岁" }
]);

const value = ref(1); 
const categories = ref([]); 

const search = () => {
  uni.navigateTo({
    url: '/pages/search/search'
  });
};

const toknowledgelist = () => {
	uni.navigateTo({
		url: '/pages/knowledge/list/list'
	})
}

</script>

<style scoped>
.page {
  padding: 0rpx 30rpx;
}

.header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 18rpx 30rpx;
  border-bottom: 6rpx solid #f2f2f2;
}

.first-row {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.first-row-left {
  flex: 0.4;
}

.first-row-right {
  flex: 1;
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
  border-radius: 30rpx;
  margin-left: 30rpx;
}

.search-icon {
  display: flex;
  align-items: center;
}

.input {
  height: 70rpx;
}

.knowledge-image {
  margin: 30rpx 30rpx;
  height: 260rpx;
}

.knowledge-title {
  font-size: 36rpx;
  text-align: center;
  margin: 30rpx 0rpx;
}

.sign-button {
  width: 100px;
  height: 30px;
  line-height: 60rpx;
  font-size: 14px;
  color: #666EE8;
  background-color: #F0F1FD;
  border-color: #fff;
  margin: 0;
  padding: 0;
}

.row-item {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
}

</style>